<!DOCTYPE html>
<html lang="en">

<head>

    {{template "common/head.html" .}}

    <style type="text/css">
        .page-setting {
            position: relative;
            padding: 40px 26px 0px;
        }

        .page-setting-container {
            background-color: #fff;
            height: calc(100vh - 40px);
            -webkit-box-shadow: 1px 3px 35px 1px rgba(199, 197, 197, 0.27);
            box-shadow: 1px 3px 35px 1px rgba(199, 197, 197, 0.27);
            border-radius: 14px;
        }

        .page-setting-header {
            margin-bottom: 40px;
        }

        .page-setting-list {
            margin-top: -24px;
        }

        .page-setting-item {
            color: #383838;
            padding-top: 24px;
        }

        .page-setting .split-line {
            width: 100%;
            height: 2px;
            background-color: #fec901;
            margin-top: 16px;
        }

        .page-setting .user-avatar {
            width: 72px;
            height: 72px;
            border-radius: 36px;
            overflow: hidden;
        }

        .page-setting .user-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }

        .page-setting .user-info {
            padding-left: 32px;
        }

        .page-setting .user-info .phone {
            color: #cdcdcd;
        }

        .page-setting-contact {
            width: 320px;
            height: 100px;
            background-color: #fff;
            -webkit-box-shadow: 3px 2px 9px 0px rgba(67, 49, 10, 0.49);
            box-shadow: 3px 2px 9px 0px rgba(67, 49, 10, 0.49);
            border-radius: 12px;
        }

        .page-setting-contact a {
            display: block;
            background-size: cover;
            width: 50px;
            height: 50px;
            background-image: url();
            margin: 4px auto 0;
        }

        .page-setting-question {
            width: 320px;
            margin: 0 auto;
            padding: 16px 24px;
            background: rgba(254, 201, 1, 1);
            border-radius: 14px;
        }

        .page-setting-question textarea {
            margin-top: 12px;
            width: 100%;
            min-height: 260px;
            height: 100%;
            text-align: left;
            padding: 14px;
            box-sizing: border-box;
            font-size: 100%;
            line-height: inherit;
            color: #666;
            background-color: #fff;
            border-radius: 2px;
            resize: none;
            border: none;
            outline: none;
        }
        .style-select {
            margin-bottom: 12px;
        }
    </style>
</head>
<body>
    <div class="page-main">
        <div class="page-main-container">
            <div class="child-view page-setting">
                <div class="ui-pd-30 page-setting-container">
                    <div flex="" class="ui-pd-l-6 page-setting-header">
                        <div class="user-avatar">
                            <img src="/static/front/images/4.png" alt="" srcset=""></div>
                        <div class="user-info">
                            <div class="name ui-text-25 ui-mg-b-10">{{.userInfo.RealName}}</div>
                            <div class="phone ui-text-16">{{.userInfo.PhoneShow}}</div>
                        </div>
                    </div>
                    <div class="page-setting-body">
                        <div class="page-setting-list">
                            <div class="page-setting-item" onclick="location.href='{{urlfor "teacher.UserController.MyWallet"}}';">
                                <div flex="main:justify" class="ui-text-16 ui-pd-r-9 ui-pd-l-2">
                                    <span style="font-size: 16px;">我的钱包</span>
                                    <span style="font-size: 16px;">+</span></div>
                                <div class="split-line"></div>
                            </div>
                            <div class="page-setting-item" data-name="" onclick="showFeedback()">
                                <div flex="main:justify" class="ui-text-16 ui-pd-r-9 ui-pd-l-2">
                                    <span style="font-size: 16px;">问题反馈</span>
                                    <span style="font-size: 16px;">+</span>
                                </div>
                                <div class="split-line"></div>
                            </div>
                            <div class="page-setting-item" data-name="contact" onclick="showContact()">
                                <div flex="main:justify" class="ui-text-16 ui-pd-r-9 ui-pd-l-2">
                                    <span style="font-size: 16px;">联系我们</span>
                                    <span style="font-size: 16px;">+</span>
                                </div>
                                <div class="split-line"></div>
                            </div>
                            <div class="page-setting-item" onclick="location.href='{{urlfor "parent.IndexController.Index"}}';">
                                <div flex="main:justify cross:center" class="ui-text-16 ui-pd-r-9 ui-pd-l-2">
                                    <span style="font-size: 16px;">切换为家长</span>
                                    <span class="ui-text-10" style="color: rgb(139, 138, 138);">非家长身份请勿点击</span>
                                </div>
                                <div class="split-line"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{template "common/teacher-nav.html" .}}

    </div>
</body>

<script type="text/html" id="contact-tpl">
    <div class="ui-text-center ui-pd-t-24 page-setting-contact">
        <p class="ui-text-18">{{.contact}}</p><a href="tel:{{.contact}}"></a>
    </div>
</script>

<script type="text/html" id="feedback-tpl">
    <div class="ui-text-center ui-pd-t-24 page-setting-question">
        <form id="feedback-form">
            {{.xsrfdata}}
            <textarea placeholder="请输入反馈内容" id="feedback_content" name="content" maxlength="500" indicator="true" class="m-textarea"></textarea>
        </form>
        <div class="m-button m-button-default m-button-block" style="width: 90px; margin: 32px auto 0px;" onclick="feedbackDoSubmit()">提交</div>
    </div>
</script>

<script type="text/html" id="notice-tpl">
    <div class="page-main-publish">
        <div class="page-main-form" flex="dir:top">
            <form id="data-form">
                {{.xsrfdata}}
                <select id="notice_type" name="notice_type" class="m-select ui-mg-b-10">
                    <option value="">请选择通知类型：</option>
                    <option value="1">作业</option>
                    <option value="2">会议</option>
                </select>
                <select id="notice_course" name="course_id" class="m-select ui-mg-b-10">
                    <option value="">请选择科目：</option>
                    {{range .courseList}}
                        <option value="{{.Id}}">{{.Name}}</option>
                    {{end}}
                </select>
                <select id="notice_class" name="class_id" class="m-select ui-mg-b-10">
                    <option value="">请选择班级：</option>
                    {{range .classList}}
                        <option value="{{.Id}}">{{.Name}}</option>
                    {{end}}
                </select>
                <textarea id="notice_content" name="content" placeholder="请输入内容" maxlength="500" indicator="true"
                          class="m-textarea"></textarea>
            </form>
        </div>
        <div class="m-button m-button-default m-button-block publish-submit-btn"
             style="width: 110px; margin: 12px auto 0px; border-radius: 14px;" onclick="doSubmit()">发布
        </div>
    </div>
</script>

<script>

    var canSubmit = true,
        submitUrl = '';

    const popup = new MPopup({
        content: ``
    });

    function showContact() {
        popup.show($('#contact-tpl').html());
    }

    function showFeedback() {
        popup.show($('#feedback-tpl').html());
    }

    function showPublish() {
        popup.show($('#notice-tpl').html());
        tastySelect();
    }

    function doSubmit() {

        var noticeType = $('#notice_type').val().toString();

        if (noticeType.length <= 0) {
            layer.open({content: '请选择通知类型', skin: 'msg', time: 2});
            return false;
        }
        if (noticeType == '1') {
            if ($('#notice_course').val().length <= 0) {
                layer.open({content: '请选择科目', skin: 'msg', time: 2});
                return false;
            }
        }
        if ($('#notice_class').val().length <= 0) {
            layer.open({content: '请选择班级', skin: 'msg', time: 2});
            return false;
        }
        if ($('#notice_content').val().length <= 0) {
            layer.open({content: '请输入作业内容', skin: 'msg', time: 2});
            return false;
        }

        switch (noticeType) {
            case '1':
                submitUrl = '{{urlfor "teacher.HomeworkNoticeController.DoAdd"}}';
                break;
            case '2':
                submitUrl = '{{urlfor "teacher.MeetingNoticeController.DoAdd"}}';
                break;
        }

        if (!canSubmit) return false;
        var loadIndex = layer.open({type: 2});
        canSubmit = false;

        $.ajax({
            url: submitUrl,
            type: 'POST',
            data: $('#data-form').serialize(),
            dataType: 'json',
            success: function (res) {

                layer.close(loadIndex);
                canSubmit = true;

                layer.open({content: res.msg, skin: 'msg', time: 2});
                if (res.status == 1) {
                    setTimeout(function () {
                        location.href = '{{urlfor "teacher.UserController.Index"}}';
                    }, 1000);
                }

            }
        });

    }

    function feedbackDoSubmit() {

        if ($('#feedback_content').val().length <= 0) {
            layer.open({content: '请输入反馈内容', skin: 'msg', time: 2});
            return false;
        }

        if (!canSubmit) return false;
        var loadIndex = layer.open({type: 2});
        canSubmit = false;

        $.ajax({
            url: '{{urlfor "teacher.FeedbackController.DoAdd"}}',
            type: 'POST',
            data: $('#feedback-form').serialize(),
            dataType: 'json',
            success: function (res) {

                layer.close(loadIndex);
                canSubmit = true;

                layer.open({content: res.msg, skin: 'msg', time: 2});
                if (res.status == 1) {
                    setTimeout(function () {
                        location.href = '{{urlfor "teacher.UserController.Index"}}';
                    }, 1000);
                }

            }
        });

    }

</script>

</html>